<template>
  <div class="demo-section">
    <div class="section-content">
      <h3 class="section-title">v-memo 指令优化</h3>
      <div class="section-description">
        <p><strong>v-memo</strong> 指令允许你缓存模板的一部分，只有当依赖的响应式数据变化时才重新渲染。</p>
        <p>适用于渲染大型列表或复杂计算的场景，可以显著提高渲染性能。</p>
      </div>
      <div class="controls-container">
        <div class="control-group">
          <button @click="incrementCounter" class="primary-button indigo-button">
            增加计数器 (不影响 v-memo)
          </button>
          <span class="counter-display">计数器: {{ counter }}</span>
        </div>
        <div class="control-group">
          <button @click="updateMemoData" class="primary-button purple-button">
            更新 v-memo 数据
          </button>
        </div>
      </div>
      <div class="stats-container">
        <div class="stat-item">
          <span class="stat-label">不使用 v-memo 渲染次数:</span>
          <span class="stat-value normal-count">{{ normalRenderCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">使用 v-memo 渲染次数:</span>
          <span class="stat-value memo-count">{{ memoRenderCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">性能提升:</span>
          <span class="stat-value improvement">{{ performanceImprovement }}%</span>
        </div>
      </div>
      <div class="rendering-demo">
        <div class="rendering-comparison">
          <div class="rendering-column">
            <h4 class="demo-title">不使用 v-memo (普通渲染)</h4>
            <div class="demo-container">
              <div 
                v-for="item in memoData" 
                :key="item.id"
                class="data-item"
                @render="normalRenderCount++"
              >
                <div class="item-id">#{{ item.id }}</div>
                <div class="item-details">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-value">值: {{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="rendering-column">
            <h4 class="demo-title">使用 v-memo (优化渲染)</h4>
            <div class="demo-container">
              <div 
                v-for="item in memoData" 
                :key="item.id"
                class="data-item"
                v-memo="[item.value, item.title]"
                @render="memoRenderCount++"
              >
                <div class="item-id">#{{ item.id }}</div>
                <div class="item-details">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-value">值: {{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="code-example">
        <h4 class="demo-title">代码示例</h4>
        <pre class="code-block">&lt;!-- 使用 v-memo 指令 --&gt;
&lt;div 
  v-for="item in items" 
  :key="item.id"
  v-memo="[item.value, item.title]"&gt;
  {{ item.title }}: {{ item.value }}
&lt;/div&gt;

&lt;!-- 只有当 item.value 或 item.title 变化时，才会重新渲染 --&gt;
&lt;!-- 其他响应式数据变化不会触发这个元素的重新渲染 --&gt;</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';

// 响应式数据
const counter = ref(0);
const memoData = ref([
  { id: 1, title: '项目 1', value: Math.random() * 100 },
  { id: 2, title: '项目 2', value: Math.random() * 100 },
  { id: 3, title: '项目 3', value: Math.random() * 100 },
  { id: 4, title: '项目 4', value: Math.random() * 100 },
  { id: 5, title: '项目 5', value: Math.random() * 100 }
]);
const normalRenderCount = ref(0);
const memoRenderCount = ref(0);

// 计算属性
const performanceImprovement = computed(() => {
  if (normalRenderCount.value === 0) return 0;
  const improvement = ((normalRenderCount.value - memoRenderCount.value) / normalRenderCount.value) * 100;
  return Math.round(improvement);
});

// 方法
const incrementCounter = () => {
  counter.value++;
};

const updateMemoData = () => {
  const randomIndex = Math.floor(Math.random() * memoData.value.length);
  memoData.value[randomIndex].value = Math.random() * 100;
  memoData.value[randomIndex].title = `更新后的项目 ${memoData.value[randomIndex].id}`;
};

// 生命周期
onMounted(() => {
  // 初始化渲染计数
  nextTick(() => {
    normalRenderCount.value = 5; // 初始5个项目
    memoRenderCount.value = 5;
  });
});
</script>

<style scoped>
:root {
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-purple: #8b5cf6;
  --color-purple-dark: #7c3aed;
  --color-red: #dc2626;
  --color-red-dark: #f87171;
  --color-green: #16a34a;
  --color-green-dark: #4ade80;
  --color-blue: #2563eb;
  --color-blue-dark: #60a5fa;
  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #9ca3af;
  --color-text-light: #374151;
  --color-text-light-dark: #d1d5db;
  --color-bg-light: #f9fafb;
  --color-bg-dark: #1f2937;
  --color-bg-white: #ffffff;
  --color-bg-gray-700: #374151;
  --color-border: #e5e7eb;
  --color-border-dark: #4b5563;
  --color-code-bg: #111827;
  --color-code-text: #f3f4f6;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}

.demo-section {
  animation: fadeIn 0.3s ease;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

[data-theme="dark"] .section-title {
  color: white;
}

.section-description {
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

[data-theme="dark"] .section-description {
  color: var(--color-text-light-dark);
}

.section-description strong {
  font-weight: 600;
}

.controls-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.primary-button {
  padding: 0.5rem 1rem;
  color: white;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.indigo-button {
  background-color: var(--color-primary);
}

.indigo-button:hover {
  background-color: var(--color-primary-dark);
}

.purple-button {
  background-color: var(--color-purple);
}

.purple-button:hover {
  background-color: var(--color-purple-dark);
}

.counter-display {
  font-weight: 500;
  color: var(--color-text-light);
}

[data-theme="dark"] .counter-display {
  color: var(--color-text-light-dark);
}

.stats-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
}

[data-theme="dark"] .stats-container {
  background-color: var(--color-bg-dark);
}

@media (min-width: 768px) {
  .stats-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .stat-label {
  color: var(--color-text-tertiary);
}

.stat-value {
  font-weight: 700;
}

.normal-count {
  color: var(--color-red);
}

[data-theme="dark"] .normal-count {
  color: var(--color-red-dark);
}

.memo-count {
  color: var(--color-green);
}

[data-theme="dark"] .memo-count {
  color: var(--color-green-dark);
}

.improvement {
  color: var(--color-blue);
}

[data-theme="dark"] .improvement {
  color: var(--color-blue-dark);
}

.rendering-demo {
  margin-top: 1.5rem;
}

.rendering-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .rendering-comparison {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rendering-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.demo-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

[data-theme="dark"] .demo-title {
  color: white;
}

.demo-container {
  background-color: var(--color-bg-light);
  padding: 1rem;
  border-radius: var(--radius-md);
  max-height: 15rem;
  overflow-y: auto;
}

[data-theme="dark"] .demo-container {
  background-color: var(--color-bg-dark);
}

.data-item {
  background-color: var(--color-bg-white);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .data-item {
  background-color: var(--color-bg-gray-700);
  border-color: var(--color-border-dark);
}

.item-id {
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

[data-theme="dark"] .item-id {
  color: #818cf8;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.item-title {
  font-weight: 500;
  color: var(--color-text-primary);
}

[data-theme="dark"] .item-title {
  color: white;
}

.item-value {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .item-value {
  color: var(--color-text-tertiary);
}

.code-example {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.code-block {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', monospace;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>